<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP '4.jsp' starting page</title>
    <script type="text/javascript" src="<%=path %>/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="<%=path %>/js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="<%=path%>/js/jquery.form.js"></script>
    <script src="<%=path %>/js/ui/jquery.ui.core.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.widget.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.mouse.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.button.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.draggable.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.position.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.resizable.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="<%=path %>/css/themes/start/jquery.ui.all.css">
    <link rel="stylesheet" href="<%=path %>/css/demos.css">
    <style type="text/css">
    	body {
			margin: 0;
			padding: 0;
			text-align: center;
		}
		.main{
			margin: 0, auto;
		}
		.container{
			margin-top: 0px;
			width: 800;
			height: 450;
			background-color: #6A5ACD;
			text-align: left;
		}
		.feedback_body{
			background-color: white;
			margin-top: 20px;
			margin-left: 50px;
			margin-right: 50px;
		}
		.feedback_head{
			padding-top: 20px;
			padding-bottom: 2px;
			padding-left: 5px;	
		}
		.feedback_content{
			border-top: 1px solid #DDD;
			margin: 1px, 1px;
			padding: 10px, 0;
		}
		.feedback_footer{
			border-top: 1px solid #aaa;
			
			color: #545454;
			font-family: 'Microsoft Yahei',Arial;
			padding: 5px, 5px;
		}
		.placeholder { color: #aaa; }
		.fontDialog{
			font-family: 微软雅黑, Arial, sans-serif;
			font-size: 16px;
		}
		
		#topic{
			border-left:0px;
			border-top:0px;
			border-right:0px;
			border-bottom:1px;
			
			font: 20px/30px "Microsoft Yahei","SimHei";
			
			width: 85%;
		}
		#content{
			overflow:auto; 
			background-attachment: fixed;
			background-repeat: no-repeat; 
			border-style: solid; 
			border-color: #FFFFFF;
			
			font-size: 20px;
			width: 85%;
		}
		
    </style>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#topic, #content').placeholder();
    		$('#topic').keydown(function(){
    			var length = $('#topic').val().length;
    			if(length >= 60){
    				var temp = $('#topic').val().substr(0,58);
    				$('#topic').val(temp);
    				alert("超出60字数限制");
    			}
    		});
    		$('#content').keydown(function(){
    			var length = $('#content').val().length;
    			if(length >= 120){
    				var temp = $('#content').val().substr(0,118);
    				$('#content').val(temp);
    				alert("超出120字数限制");
    			}
    		});
    		
    		$( "#dialog-message" ).dialog({
				autoOpen: false,
				resizable: false,
				modal: true,
				buttons: {
					Ok: function() {
						$( this ).dialog( "close" );
					}
				}
			});
    		
    		var options = {
    			dataType : "html",
    			success: showResponse,
    			error: showError
    		};
    		
    		$("#form1").submit(function(){
    			var str = $("#topic").val();
    			if(str.replace(/(^\s*)|(\s*$)/g,"") == ""){
    				alert("请输入意见标题！");
    				return false;
    			}
    			var length3 = $('#topic').val().length;
    			if(length3 >= 60){
    				var temp3 = $('#topic').val().substr(0,58);
    				$('#topic').val(temp3);
    				alert("超出60字数限制");
    				return false;
    			}
    			str = $("#content").val();
    			if(str.replace(/(^\s*)|(\s*$)/g,"") == ""){
    				alert("请输入意见具体内容！");
    				return false;
    			}
    			var length2 = $('#content').val().length;
    			if(length2 >= 120){
    				var temp2 = $('#content').val().substr(0,118);
    				$('#content').val(temp2);
    				alert("超出120字数限制");
    				return false;
    			}
    			
    			
    			
    			$(this).ajaxSubmit(options); 
    			return false;
    		});
    		
    	});
    	
    	function showResponse(responseText, statusText) { 
	    	var ret = responseText.toString();
	    	if(ret == 1){
	    		$( "#dialog-message" ).dialog( "open" );
	    	}else{
	    		alert("失败");
	    	}
	    	$("#form1").resetForm();
	   	}
	   	
	   	function showError(){
	   		alert("请求失败");
	   	}
    </script>

  </head>
  
  <body>
  	<form id="form1" action="<%=path %>/ajax?method=launchFeedback" method="post">
  	<div class="main">
  		<div class="container">
  			<div class="feedback_body">
	  			<div class="feedback_head">
	  				<input type="text" id="topic" name="topic" maxlength="128" placeholder="请输入意见标题(60字内)" />
	  			</div>
	  			<div class="feedback_content">
	  				<textarea id="content" name="content" rows="12" cols="20" placeholder="请输入意见具体内容(120字内)"></textarea>
	  			</div>
	  			<div class="feedback_footer">
	  				<span>
	  					<label>
		  				权限:
		  				</label>
		  				<span style="margin-top: 12px; padding-top: 12px;">
			  				<select name="public" style="width: 100px;">
			  					<option value="0" selected="selected">私人
			  					<option value="1">公开
			  				</select>
			  			</span>
			  			<span style="margin-left: 10px;">
			  				<input type="submit" value="  提交  " style="border:1px solid #5595C4; background-color: #5A96C3; color:white; font-weight: bold;">
			  			</span>
	  				</span>
	  			</div>
  			</div>
  			<div class="demo">
  			<div id="dialog-message" title="操作成功">
				<p>
					<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
					<span class="fontDialog">您已成功执行操作</span>
				</p>
				</div>
	  		</div>
  		</div>
  		
  	</div>
  	</form>
  </body>
</html>
